<template>
  <div class="payment_index">
    <div class="payment_index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">案例列表<i class="el-icon-close"></i></div>
    </div>
    <div class="payment_index_bottom">
      <div class="payment_index_bottom_new">
        <div class="payment_index_bottom_new_goods">
          <div class="payment_index_bottom_new_goods_btn">
            <el-button type="primary" @click="handleAdd">新增案例</el-button>
          </div>
          <div class="payment_index_bottom_new_goods_screening">
            <div class="payment_index_bottom_new_goods_screening_left">
              <!-- <i>选择小区</i>
              <el-select v-model="tagType"
                         @change="getTag"
                         multiple
                         popper-class="el-select"
                         placeholder="请选择">
                <el-option v-for="item in shopTagList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select> -->
            </div>
            <div class="payment_index_bottom_new_goods_screening_right">
              <el-input v-model="input"
                        placeholder="请输入订单信息查询"></el-input>
              <button @click="toSearch"><i class="el-icon-search"></i>搜索</button>
            </div>
          </div>
        </div>
      </div>
      <div class="payment_index_bottom_table_box">
        <div class="payment_index_bottom_table">
          <table>
            <tr>
              <th></th>
              <th style="width:100px;">序号</th>
              <th>户型</th>
              <th>面积</th>
              <th>标题</th>
              <th>报价</th>
              <th>风格</th>
              <th>转发量</th>
              <th>点赞量</th>
              <th>评论数</th>
              <th>排序</th>
              <th>操作</th>
            </tr>
            <tr v-for="(v,i) in tableList"
                :key="i">
              <td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
              <td style="width:100px;">{{v.id}}</td>
              <td>{{v.house_type}}</td>
              <td>{{v.area}}m²</td>            
              <td>{{v.title}}</td>
              <td>{{v.offer}}万</td> 
              <td>
                <div>
                  <template v-if="Array.isArray(v.design_style)">
                    <el-tag size="mini" v-for="(item,index) in v.design_style" :key="index">{{item.name}}</el-tag>
                  </template>
                  <template v-else>
                    <el-tag size="mini">{{v.design_style.name}}</el-tag>
                  </template>
                </div>
              </td>
              <td>{{v.forward_num}}</td>
              <td>{{v.support_num}}</td>
              <td>{{v.comment_num}}</td>
							<td>
								<el-input style="width:80px;margin-right:10px;" size="mini" v-model="v.sort"></el-input>
                <el-button type="primary" style="width:60px;text-align:center;" size="mini" @click="changeSort(v.id,v.sort)">确定</el-button>
							</td>
              <td>
                <button class="editor"
                        @click='_toShopInfo(v.id)'>详情</button>
                <button class="shelves" @click="handleDel(v.id)">删除</button>
                <!-- <button class="delete">关闭订单</button> -->
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title"
                  colspan="11">当前数据空空如也</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    	<div class="sale_bottom_page">
			<div class="sale_bottom_page_left">
				<div class="sale_bottom_page_left_checkAll" @click="handerCheckAll">
					<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
          <div class="checkbox-botton">全选</div>
				</div>				
				<el-button type="primary" @click="selectDel" :disabled="openIsDisabled ">删除</el-button>
			</div>
			<div class="sale_bottom_page_right">
				 <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="page"
				      :page-sizes="[10, 20, 30, 40]"
				      :page-size="pagesize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total"
					  background>
				</el-pagination>
			</div>
		</div>
  </div>
</template>
	
	<script>
  // import util from '@/uitls/util';
export default {
  data () {
    return {
      input: '',
      checkAll: false,
      currentPage4: 1,
      checkBoxAll: [],				// 选中的数据
      page: 1,
      pagesize: 10,
      total: 0,
      tableList: [],
      tagType: [], //店铺标签
      shopTagList: [],
      value2: '',
      sid:null,
      openIsDisabled: false, //按钮的禁用
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      estate_id:null
    }
  },
  mounted () {
    this.sid = localStorage.getItem('sid')  
    this._getOrdersList()
  },
  methods: {
		// 排序按钮
    changeSort(id,sort){
        console.log(id,sort,'=====');
		    let sor = {[`${id}`]:sort}
		    let sortArr = JSON.stringify(sor)
        this.$http.post('/api/admin/decoration/BuildCase/saveOrder',{sort:sortArr}).then(res=>{
            console.log(res,'排序结果');
            if(res.code==1){
                this._getOrdersList()
                this.$message.success('操作成功')
            }else{
                this.$message.warning(res.msg)
            }
        })
    },
     
    // 多选
    handlerCheckbox(i) {
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index > -1) {
          arr.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      this.shelvesAlls.push(this.tableList[i].id);
      console.log(this.shelvesAlls,"选中的");
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
      } else {
        this.checkBoxAll = [];
      }
      // 去重
      let res = this.checkBoxAll;
      for (let i = 0; i < res.length; i++) {
        for (let j = i + 1; j < res.length; j++) {
          if (res[i] == res[j]) {
            res.splice(j, 1);
            j--;
          }
        }
      }
      // 全选下架
      // this.checkBoxAll.map(v => {
      //   return this.shelvesAlls.push(this.tableList[v].product_id.toString());
      // });
    },
    // 选中删除
    selectDel() {
      // this.$confirm("此操作将删除选中商品, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // })
      //   .then(() => {
      //     let selectID = this.shelvesAlls.join(",")
      //     this.$http
      //       .post("/api/admin/designer/DesignCase/del", {
      //         id: selectID,
      //       })
      //       .then(res => {
      //         if (res.code == 1) {
      //           this._getOrdersList()
      //           this.checkBoxAll = [];
      //           if (this.checkBoxAll.length == 0) {
      //             this.checkAll = false;
      //             this.openCenter();
      //           }
      //         }
      //       });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除"
      //     });
      //   });
    },

    // 搜索按钮
    toSearch(){
      this._getOrdersList()
    },
    // 获取选中店铺标签
    getTag (value) {
      let valueStr = value.toString();
      this.cate_list = valueStr
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this._getOrdersList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.page = val
      this._getOrdersList()
    },
    hangerInto () {
      this.$router.push({ path: '/paymentDetails' });
    },
    // 获取待接单列表
    _getOrdersList () {
      let params = {
        decoration_id:this.sid,
        keyword:this.input,
        start_date:'',
        end_date:'',
        page:this.page,
        pagesize:this.pagesize
      }
      this.$http.post('/api/admin/decoration/BuildCase/index',params).then(res=>{
        console.log(res,'案例列表');
        if(res.code==1){
          this.tableList = res.data.list?res.data.list:[];
          this.total = res.data.total
        }
      })
    },
    // 消息提示
    openCenter() {
      this.$message({
        message: "删除成功",
        type: "success",
        duration: 2000,
        center: true
      });
    },

    //点击详情跳转
    _toShopInfo (id) {
      // console.log(e);
      // let id = e.target.dataset.id;
      this.$router.push({name:'constrCaseDetailDecora',query:{case_id:id}})
    },

    // 点击添加按钮
    handleAdd(){
      this.$router.push({name:'constrCaseDetailDecora',query:{}})
    },

    handleDel(id){
      this.$confirm('确定要删除此案例吗？','提示',{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{
        this.$http.post('/api/admin/decoration/BuildCase/del',{id}).then(res=>{
          if(res.code==1){
            this.$message({
            message: '删除成功',
            type: 'success'
            });
            this._getOrdersList()
          }else{
            this.$message.warning(res.msg)
          }
        })
      })
      
    }
  },
}
	</script>


<style lang="less" scoped="scoped">
@import "index.less";
</style>
